<template>
  <view class="container screen-width">
    <view class="box">
      <view class="item">
        <view class="name">会员类型</view>
        <view class="value">{{ info.gradeName }}</view>
      </view>
      <view class="item">
        <view class="name">到期时间</view>
        <view class="value">
          {{
          info.expireTime ? info.expireTime : "--"
          }}
        </view>
      </view>
      <view class="item">
        <view class="name">可订阅部门</view>
        <view class="value">
          {{
          info.gradeAttentionDepartmentTotal == null
          ? "无限次"
          : "总" + info.gradeAttentionDepartmentTotal + "个"
          }}
          {{
          info.gradeAttentionDepartmentTotal == null
          ? ""
          : "剩余" + info.surplusAttentionDepartmentTotal + "个"
          }}
        </view>
      </view>
      <view class="item">
        <view class="name">可关注企业</view>
        <view class="value">
          {{
          info.gradeAttentionCompanyTotal == null
          ? "无限次"
          : "总" + info.gradeAttentionCompanyTotal + "个"
          }}
          {{
          info.gradeAttentionCompanyTotal == null
          ? ""
          : "剩余" + info.surplusAttentionCompanyTotal + "个"
          }}
        </view>
      </view>
      <view class="item">
        <view class="name">企业查询次数</view>
        <view class="value">
          {{
          info.gradeProjectQueryTotal == null
          ? "无限次"
          : "总" + info.gradeProjectQueryTotal + "个"
          }}
          {{
          info.gradeProjectQueryTotal == null
          ? ""
          : "剩余" + info.surplusProjectQueryTotal + "个"
          }}
        </view>
      </view>
      <view class="item">
        <view class="name">企业对比</view>
        <view class="value">
          {{
          info.gradeCompanyContrastTotal == null
          ? "无限次"
          : "总" + info.gradeCompanyContrastTotal + "个"
          }}
          {{
          info.gradeCompanyContrastTotal == null
          ? ""
          : "剩余" + info.surplusCompanyContrastTotal + "个"
          }}
        </view>
      </view>
      <view class="item item-last">
        <view class="name">数据导出</view>
        <view class="value">
          {{
          info.downloadTotal == null
          ? "无限次"
          : "总" + info.downloadTotal + "个"
          }}
          {{
          info.downloadTotal == null
          ? ""
          : "剩余" + info.surplusDownloadTotal + "个"
          }}
        </view>
      </view>
    </view>
    <view class="btn screen-width" @tap="goVipPage">开通/升级会员</view>
    <Festival></Festival>
  </view>
</template>

<script>
import { getInfo } from "../../util/api/user";
export default {
  data() {
    return {
      info: {}
    };
  },
  onLoad() {
    getInfo().then(res => {
      this.info = res.result;
    });
  },
  methods: {
    goVipPage() {
      uni.navigateTo({
        url: "/pages/VIP/index"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding-bottom: 88rpx;
  position: relative;

  .btn {
    height: 88rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    text-align: center;
    color: #fff;
    background: #1678ff;
    line-height: 88rpx;
  }
}

.box {
  width: 100%;
  background: #ffffff;
  padding: 0 30rpx;
  margin-top: 20rpx;

  .coupon-list {
    .coupon {
      background-image: url("/static/mine/coupon.png");
      width: 100%;
      height: 120rpx;
      margin-bottom: 20rpx;
      padding: 0 28rpx 0 52rpx;

      .coupon-title {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #333333;
        margin-left: 54rpx;

        &-hint {
          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #aaaaaa;
        }
      }

      .right {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: center;
        color: #1678ff;
      }
    }
  }

  .title {
    height: 120rpx;
    line-height: 120rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;

    &-hint {
      color: #1678ff;
    }
  }
  .item {
    height: 120rpx;
    border-bottom: 1rpx solid #ebebeb;
    display: flex;
    align-items: center;
    line-height: 120rpx;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;

    .name {
      width: 260rpx;
    }
    .value {
      color: #1678ff;
    }
    &-last {
      border-bottom: 0;
    }
  }
}
</style>
